<template>
    <div>
        <!-- 页面头部导航，显示当前操作和模块名称 -->
         <!-- 二级标题，说明当前操作 -->
          <!-- 头部图标（未配置） -->
            <!-- 主标题，标识模块名称 -->
        <el-page-header
            content="编辑信息"           
            icon=""                     
            title="信息管理"            
        />

        <!-- 信息编辑表单 -->
         <!-- 表单引用，用于触发表单验证和操作 -->.
           <!-- 绑定响应式数据模型 -->
              <!-- 表单字段验证规则 -->
                <!-- 标签宽度统一设置 -->
                   <!-- 自定义表单样式类 -->
        <el-form
            ref="newsFormRef"           
            :model="state.newsForm"    
            :rules="newsFormRules"     
            label-width="80px"          
            class="demo-ruleForm"      
        >
            <!-- 标题输入框 -->
              <!-- 字段标签 -->
               <!-- 与验证规则中的字段名匹配 -->
            <el-form-item
                label="标题"            
                prop="title"            
            >
                <el-input v-model="state.newsForm.title" /> <!-- 双向绑定标题字段 -->
            </el-form-item>

            <!-- 内容编辑区域，使用自定义富文本编辑器 -->
             <!-- 字段标签 -->
               <!-- 与验证规则中的字段名匹配 -->
            <el-form-item
                label="内容"             
                prop="content"         
            >
                <editor @event="handleChange" /> <!-- 自定义编辑器组件，监听内容变化 -->
            </el-form-item>

            <!-- 岗位类别选择框 -->
               <!-- 字段标签 -->
                 <!-- 与验证规则中的字段名匹配 -->
            <el-form-item
                label="岗位类别"       
                prop="job_category"    
            >
             <!-- 双向绑定岗位类别值 -->
                 <!-- 添加间距样式类 -->
                    <!-- 占位提示文本 -->
                       <!-- 宽度占满父容器 -->
                <el-select
                    v-model="state.newsForm.job_category"  
                    class="m-2"                   
                    placeholder="Select"           
                    style="width:100%"             
                >
                    <!-- 遍历岗位类别选项，动态生成下拉选项 -->
                     <!-- 循环渲染选项 -->
                       <!-- 唯一键值（建议使用value作为key） -->
                          <!-- 选项显示文本 -->
                             <!-- 选项实际值 -->
                    <el-option
                        v-for="item in job_category_options" 
                        :key="item.value"                
                        :label="item.label"             
                        :value="item.value"             
                    />
                </el-select>
            </el-form-item>

            <!-- 专业类别选择框 -->
             <!-- 字段标签 -->
              <!-- 与验证规则中的字段名匹配 -->
            <el-form-item
                label="专业类别"         
                prop="major_category"   
            >
             <!-- 双向绑定专业类别值 -->
              <!-- 添加间距样式类 -->
                 <!-- 占位提示文本 -->
                   <!-- 宽度占满父容器 -->
                <el-select
                    v-model="state.newsForm.major_category"  
                    class="m-2"                            
                    placeholder="Select"                 
                    style="width:100%"                    
                >
                    <!-- 遍历专业类别选项，动态生成下拉选项 -->
                     <!-- 循环渲染选项 -->
                        <!-- 唯一键值（建议使用value作为key） -->
                             <!-- 选项显示文本 -->
                               <!-- 选项实际值 -->
                    <el-option
                        v-for="item in major_category_options" 
                        :key="item.value"                   
                        :label="item.label"               
                        :value="item.value"                  
                    />
                </el-select>
            </el-form-item>

            <!-- 提交按钮 -->
            <el-form-item style="margin-bottom: 300px;"> <!-- 底部边距，调整按钮位置 -->
               <!-- 主按钮样式 -->
                <!-- 点击触发提交表单 -->
                <el-button
                    type="primary"      
                    @click="submitForm()" 
                >更新信息</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
// 引入Vue组合式API
import { ref, reactive, onMounted } from "vue";
// 引入自定义富文本编辑器组件
import editor from "@/components/editor/Editor";
// 引入路由相关钩子
import { useRouter, useRoute } from "vue-router";
// 引入Vuex状态管理钩子
import { useStore } from "vuex";
// 引入HTTP请求库
import axios from "axios";

// 获取路由实例、当前路由参数和Vuex存储
const router = useRouter();
const route = useRoute();
const store = useStore();

// 表单引用和响应式数据模型
const newsFormRef = ref(); // 表单引用，用于验证
let state = reactive({
  newsForm: {
    id: "",                // 信息ID（编辑时必填，新增时可能自动生成）
    title: "",             // 标题
    content: "",           // 内容
    job_category: "job1",  // 岗位类别（默认值）
    major_category: "major1", // 专业类别（默认值）
    isPublish: 0,          // 发布状态（0=未发布，1=已发布）
    author: store.state.userInfo.id // 作者ID（从Vuex获取当前用户ID）
  }
});

// 生命周期钩子：组件挂载后加载编辑数据
onMounted(async () => {
  // 初始化模拟数据（实际开发中需删除）
  state.newsForm = {
    title: "test1",
    content: "test1",
    job_category: "job1", 
    major_category: "major1",
    isPublish: 0, 
    author: "author"
  };

  // 通过路由参数获取信息ID，从后端获取真实数据
  const form = await axios.get(`/article/findById?id=${route.params.id}`);
  state.newsForm = form.data.data; // 更新表单数据为后端返回的信息
});

// 表单验证规则
const newsFormRules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],   // 标题必填
  content: [{ required: true, message: "请输入内容", trigger: "blur" }], // 内容必填
  job_category: [{ required: true, message: "请选择岗位分类", trigger: "blur" }], // 岗位类别必填
  major_category: [{ required: true, message: "请选择专业分类", trigger: "blur" }] // 专业类别必填
});

// 富文本编辑器内容变化处理函数
const handleChange = (data) => {
  state.newsForm.content = data; // 将编辑器内容同步到表单数据
};

// 岗位类别选项（实际应用中建议从后端动态获取）
const job_category_options = [
  { label: "job1", value: "job1" },
  { label: "job2", value: "job2" },
  { label: "job3", value: "job3" }
];

// 专业类别选项（实际应用中建议从后端动态获取）
const major_category_options = [
  { label: "major1", value: "major1" },
  { label: "major2", value: "major2" },
  { label: "major3", value: "major3" }
];

// 表单提交处理函数
const submitForm = () => {
  newsFormRef.value.validate(async (valid) => { // 触发表单验证
    if (valid) { // 验证通过
      // 发送更新请求到后端
      console.log(state.newsForm); // 打印表单数据（调试用）
      await axios.post("/article/updateById", state.newsForm);
      router.push(`/information-manage/list`); // 跳转至信息列表页
    }
  });
};
</script>

<style lang="scss" scoped>
.el-form {
  margin-top: 50px; // 表单顶部间距，调整页面布局
}
</style>